<template>
  <div class="detail">
    <detail-bar ref="detailbar" @titleClick="titleClick"></detail-bar>
    <scroll
      class="content"
      :probeType="2"
      :pull-up-load="true"
      ref="scroll"
      @scroll="contentScroll"
    >
      <detail-swiper :swiperImg="topImages"> </detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-img-info
        :detailimg="detailimg"
        @imageLoad="imageLoad"
      ></detail-img-info>
      <detail-param-info ref="param" :paramInfo="GoodsParam">
      </detail-param-info>
      <detail-rate-info
        ref="rate"
        :rateInfo="rate"
        @userImgLoad="imageLoad"
      ></detail-rate-info>
      <goods-list ref="recommend" :goods="recommends"></goods-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShow"></back-top>
    <detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
    <!-- <toast :message="message" :show="show"></toast> -->
  </div>
</template>

<script>
import DetailBar from "./childComps/detailBar";
import DetailSwiper from "./childComps/detailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import Scroll from "components/common/scroll/scroll";
import DetailShopInfo from "views/detail/childComps/DetailShopInfo";
import DetailImgInfo from "views/detail/childComps/DetailImgInfo";
import DetailParamInfo from "views/detail/childComps/DetailParamInfo";
import DetailRateInfo from "views/detail/childComps/DetailRateInfo";
import GoodsList from "components/content/goods/GoodsList";
import DetailBottomBar from "views/detail/childComps/DetailBottomBar";
import Toast from "components/common/toast/Toast.vue";
import { debounce } from "common/utils";
import { getDetail, getRecommend, Goods, GoodsParam } from "network/detail";
import { itemListenerMixin, backTopMixin } from "common/mixin";
import { mapActions } from "vuex";
export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailimg: {},
      GoodsParam: {},
      rate: {},
      recommends: [],
      themeTopYs: [],
      getthemeTopY: null,

      tabOffsetTop: 0,
      barIndex: 0,
      currentIndexs: 0,
      // message: null,
      // show: false,
    };
  },
  /* 混入了防抖函数,点击返回顶部函数 */
  mixins: [itemListenerMixin, backTopMixin],

  destroyed() {
    this.$bus.$off("itemImageLoad", this.itemImgListener);
  },
  created() {
    this.iid = this.$route.params.iid;
    this.getDetail(this.iid);
    this.getRecommend();

    /* 详情页获取4个组件的offsettop 点击标题跳转,延迟100ms后输出 此处为了防抖 */
    this.getthemeTopY = debounce(() => {
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.param.$el.offsetTop);
      this.themeTopYs.push(this.$refs.rate.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
    }, 100);
  },
  methods: {
    ...mapActions(["addCrat"]),
    getDetail(iid) {
      getDetail(iid).then((res) => {
        //对res进行简单封装到data，data相当于res.result
        const data = res.result;

        this.topImages = data.itemInfo.topImages;
        this.shop = data.shopInfo;

        this.detailimg = data.detailInfo;

        //获取商品信息
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        this.GoodsParam = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );
        //获取评论信息
        if (data.rate.cRate !== 0) {
          //若有评论数
          this.rate = data.rate.list[0];
        }
      });
    },
    contentScroll(position) {
      const positionY = -position.y;
      this.listenBackTop(position);
      for (let i in this.themeTopYs) {
        //用of循环的是offsetTop值，用in循环的是索引
        i = parseInt(i); //用in循环的i为字符串，所以要强转

        //当position大于等于offsettop值时指定title变色 ，此处position+150是为了上拉下拉的时候title不是那么快的变色
        if (positionY + 150 >= this.themeTopYs[i]) {
          this.$refs.detailbar.currentIndex = i;
        }
      }
    },
    imageLoad() {
      this.newRefresh(); //此newRefresh()是调用mixin封装后的中的newRefresh,以后使用防抖直接调用newRefresh()即可
      this.getthemeTopY(); //图片加载完成后调用防抖后的4个组件
    },
    getRecommend() {
      getRecommend().then((res) => {
        this.recommends = res.data.list;
      });
    },
    titleClick(index) {
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 100); //跳转4个title对应的组件
    },
    addToCart() {
      const product = {};
      product.image = this.topImages[0]; //传入图片
      product.title = this.goods.title; //商品标题
      product.desc = this.goods.desc; //商品描述
      product.realprice = this.goods.realPrice; //最低价格
      product.iid = this.iid; //商品唯一标识id
      // this.$store.dispatch('addCrat', product)
      this.addCrat(product).then((res) => {
        //将封装好的的东西传入总线
        this.$toast.show(res, 2000);
      });
    },
  },
  components: {
    DetailBar,
    DetailSwiper,
    DetailBaseInfo,
    Scroll,
    DetailShopInfo,
    DetailImgInfo,
    DetailParamInfo,
    DetailRateInfo,
    GoodsList,
    DetailBottomBar,
    Toast,
  },
};
</script>

<style  scoped>
.detail {
  position: relative;
  height: 100vh;
  background-color: white;
  z-index: 20;
}
.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
